<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="java.util.Iterator"%>
<%@page import="net.groupme.model.ObjectFactory"%>
<%@page import="org.groupme.contextsearch.evaluation.ContextBasedUserSearchEvaluation"%>
<%@page import="org.groupme.contextsearch.ContextSearch"%>
<%@page import="java.util.List"%>
<%@page import="net.groupme.search.strategy.model.WeightedUser"%>
<%@page import="org.groupme.contextsearch.evaluation.model.UserEvaluation"%>
<%@page import="net.groupme.model.Tag"%>
<%@page import="org.groupme.contextsearch.evaluation.model.SearchSetting"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="../jsp-includes/mymetaheader.jsp" %>
	
	<!--  Ajax-Includes -->
    <script type='text/javascript' src='/GroupMe/dwr/interface/DWRUserManager.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/interface/DWRContextSearchEvaluationManager.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/engine.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/util.js'></script>
    <script type="text/javascript" src="<%= request.getContextPath()%>/highslide/highslide.js"></script>
	
	<!-- Prototype-Include -->
	<script src="<%= request.getContextPath()%>/scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="<%= request.getContextPath()%>/scriptaculous/scriptaculous.js" type="text/javascript"></script>

	
	<script type="text/javascript">   
	    hs.graphicsDir = '<%= request.getContextPath()%>/highslide/graphics/';
	    hs.outlineType = 'rounded-white';
	    hs.outlineWhileAnimating = true;
	    hs.allowMultipleInstances = false;
	    hs.marginRight = 50;
	    
	    
	    function preview(website) {
		return hs.htmlExpand(this, { src: website, contentId: 'htmlPrev', objectType: 'iframe'});
		}
	</script>
	
	<title>Welcome to GroupMe! - The Social Semantic Web</title>
	
	<!-- setting initial tag-cloud height -->
	<script type="text/javascript">
	/*This funtion sets the height of the tag-cloud to the (almost) same size as the group-list*/
		function setTagCloudSize(){
			var groupListHeight = $('main_home').getHeight();
			var userListHeight = $('latestUsers').getHeight();
			var tagCloudHeightSize = groupListHeight - userListHeight;
			var tagCloudHeight = tagCloudHeightSize + "px";
			$('tagCloud_content').setStyle({
				height: tagCloudHeight,
			});
		}
		
		
		function showCompleteTagCloud(){
			DWRSearchManager.getCompleteTagCloud(showCompleteTagCloudCallback);
			$('main_home_content').hide();
			$('user_groups').setStyle({paddingBottom: '9px'});
			$('completeTagcloud_content').show();
			$('completeTagcloud_content').innerHTML += "<img src=\"<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>\"/> " +
					"<small><i>Computing the tag cloud.</i></small>";
		}
		
		/**
		 * Visualize the complete groupme tag cloud.
		 */
		 function showCompleteTagCloudCallback(tagCloud){
		 	if(tagCloud == null || tagCloud.html == ""){
		 		$('completeTagcloud_content').innerHTML = "<i>Sorry, there is a problem with computing the tag cloud. Try it again</i>";
		 	}else{
		 		$('completeTagcloud_content').innerHTML = tagCloud.html;
		 		$('completeTagcloud_content').show();
				}
			}
					
		function storeUserRatingWRTQuery(userId, rating, setting){
			//alert("r: " + rating + ", user: " + userId + "setting: " + setting);
			DWRContextSearchEvaluationManager.storeUserQueryRating('<%= userManager.getUser().getId() %>', userId, rating, setting, stored);
		}	
		
		function stored(resultMessage){
			//do something
		}
		
		//init stuff:		
	function init() {
		DWRUtil.useLoadingMessage();
		computeTagCloud();  
	}
	</script>
	
	<style type="text/css" media="screen">
				
			/* put the left rounded edge on the track */
			.slider-track-left {
				position: absolute;
				width: 5px;
				height: 9px;
				background: transparent url(./images/slider-images-track-left.png) no-repeat top left;
			}
			
			/* put the track and the right rounded edge on the track */
			.slider-track {
				background: transparent url(./images/slider-images-track-right.png) no-repeat top right;
			}

		</style>
	
</head>
<body onload="init();">
	<!-- title image, logo:  -->
	<div id="groupme_header">
		<%@ include file="../jsp-includes/groupme_header.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="../jsp-includes/groupme_menu.jsp" %>
	</div>
	<!-- content and sidebar -->
	<!-- Content: -->
	<div id="mycontent">
		<div id="welcome" style="text-align: center;  margin-bottom: 1em; color: #ccc;  font-size: small;">
				Welcome to the GroupMe! Context Search User Study 
		</div>
		<div id="main_home" style="font-size: small">
		
			<% if(userManager.getUser() == null){ %>
				Please login with your GroupMe! user account. If you do not have an account yet then please create a GroupMe! account!
			<%} else { %>
			<%
			int ratingCounter = 0;
			for(Tag queryTag: ContextBasedUserSearchEvaluation.searchSettings.keySet()){ %>
				<h1>Query: <%= queryTag %></h1>
				<%for(SearchSetting actualSetting: ContextBasedUserSearchEvaluation.searchSettings.get(queryTag)){
					for(int s=0; s < ContextBasedUserSearchEvaluation.searchStrategies.length; s++){%>
					<h2>Search Strategy - <%= ContextBasedUserSearchEvaluation.searchStrategies[s].getName() %></h2>
				<%  List<WeightedUser> result =  ContextBasedUserSearchEvaluation.searchEngine.searchAndRankUsers(queryTag, actualSetting.context, ContextBasedUserSearchEvaluation.searchStrategies[s]);
					int topk = 20;%>
					Searching for users related to:<br/>
					<strong>query:</strong> <strong><a href="<%= queryTag.getURI() %>"><%= queryTag.getKeyword() %></a> </strong><br/>
					<strong>context:</strong> <%= actualSetting.context.toHTMLString() %>
					
					<table style="border: thin; border-style: solid; border-color: gray;">
					<tr><td><strong>rank </strong></td><td><strong>user </strong></td><td><strong>score </strong></td><td><strong>click to show preview </strong></td><td><strong>relevant to query? </strong></td><td><strong>relevant to context?</strong></td></tr>
					
					<% for(int j = 0; j< result.size() && j < topk; j++){%>
						<tr>
							<td><%= j + "." %></td>
							<td><a target="previewBrowserWindow" href="<%= result.get(j).getIdentifiable().getURI() %>"><%= result.get(j).getIdentifiable().getLabel() %></a> </td> 
							<td style="color: gray;"><%= Math.floor(result.get(j).getWeight() * 1000.0) / 1000.0 %></td> 
							<td><a href="#" id="iframetest" class="highslide" onclick="return hs.htmlExpand(this, { src: '<%= result.get(j).getIdentifiable().getURI() %>', align: 'center',  objectType: 'iframe',  minWidth: 600, objectLoadTime: 'before', allowWidthReduction: 1})">preview</a> </td>
							<td>
								<select tabindex="<%= ratingCounter %>" name="<%= "uqr" %>" >
								 	<option value="-1">select</option>
								 	<option value="0">I don't know</option>
								 	<option value="4">yes</option>
								 	<option value="3">rather yes</option>
								 	<option value="2">rather no</option>
								 	<option value="1">no</option>
								 	 
								</select>
							</td>
							<td>
								<% ratingCounter++; %>
								<div class="slider-track" id="track<%=ratingCounter %>" style="width:200px; height:9px;">
									<div class="slider-track-left" id="track<%=ratingCounter %>-left"></div>
									<div id="handle<%=ratingCounter %>" style="width:19px; height:20px;"><img src="./images/slider-images-handle.png" alt="" style="float: left;" /></div>
								</div>
								<p id="info<%=ratingCounter %>" style="font-size: x-small; color: gray; font-style: italic;">&nbsp;</p>

								<script type="text/javascript" language="javascript">
								// <![CDATA[
								
									// horizontal slider control
									new Control.Slider('handle<%=ratingCounter %>', 'track<%=ratingCounter %>', {
										values:[0, 0.2, 0.4, 0.6, 0.8, 1.0],
										onSlide: function(v) { 
												if(v == 0){$('info<%=ratingCounter %>').innerHTML = "please select..."; }
												else if(v == 0.2){ $('info<%=ratingCounter %>').innerHTML = "I don't know";}
												else if(v == 0.4){ $('info<%=ratingCounter %>').innerHTML = "no"; }
												else if(v == 0.6){ $('info<%=ratingCounter %>').innerHTML = "rather no"; }
												else if(v == 0.8){ $('info<%=ratingCounter %>').innerHTML = "rather yes"; }
												else{ $('info<%=ratingCounter %>').innerHTML = "yes"; }
										   		},
										onChange: function(v) { 
											if(v != 0){
												if(v == 0.2){ $('info<%=ratingCounter %>').innerHTML = "I don't know"; v = 0;}
												else if(v == 0.4){ $('info<%=ratingCounter %>').innerHTML = "no"; v = 1.0;}
												else if(v == 0.6){ $('info<%=ratingCounter %>').innerHTML = "rather no"; v = 2.0;}
												else if(v == 0.8){ $('info<%=ratingCounter %>').innerHTML = "rather yes"; v = 3.0;}
												else{ $('info<%=ratingCounter %>').innerHTML = "yes"; v = 4.0;}
												
										   		storeUserRatingWRTQuery('<%= result.get(j).getIdentifiable().getId() %>', v, <%=  actualSetting.id %>); }
										   	}
									});
						
								// ]]>
								</script>
								
							<% ratingCounter++; %>
							</td>
						</tr>
						<%}//end of result ranking FOR%>
					</table>
					<br/>
				<%} //end of SearchStrategy FOR
				} //end of Settings FOR
			 } //end of queryTag FOR%>
		<% } %>
		</div>
		<div id="sidebar_right">
			
		</div>
	</div>
	<div id="footer">
		<%@ include file="../jsp-includes/footer.jsp" %>
	</div>
</body>
</html>